<template>	   
	<el-dialog :visible.sync="visible" :width="width" :close-on-click-modal="false" :close-on-press-escape="false">
		<span slot="title">
			<span :style="{'color': method == 'remove' ? '#F56C6C' : '#000000'}">
				<el-icon v-if="method == 'remove'" class="el-icon-warning-outline" style="margin-right:20px; font-size:22px;"></el-icon>
				{{title}}
			</span>
		</span>
		<slot name="form" :props="{method}"></slot>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="visible = false">取消</el-button>
			<el-button size="mini" type="primary" @click="submit">确定
				<i class="fa fa-save"></i>
			</el-button>
		</span>
	</el-dialog>
</template>

<script>

export default {
	props: {
		label: {
			type: String,
			default: ''
		},
		path: {
			type: String
		},
		width: {
			type: String,
			default: '30%'
		},
		formData: {
			type: Object
		}
	},
	data() {
		return {
			visible: false,
			method: 'add'
		}
	},
	methods: {
		open(method) {
			this.method = method;
			this.visible = true;
		},
		submit() {
			this.$emit('submit', {
				method: this.method, 
				formData: this.formData
			});
			this.visible = false;
		}
	},
	computed: {
		title() {
			let title = '';
			if(this.method == 'add') {
				title += '添加';
			} else if(this.method == 'edit') {
				title += '修改'
			} else if(this.method == 'remove') {
				title += '删除'
			}
			title += this.label;
			return title;
		}
	}
}
</script>